<template>
	<view>
		<div class="navbar">
			<view class="tfc-list" v-if="navbarList.length<6">
				<view 
					class="tfc-item"
					:style="{width: 100/navbarList.length+'%',height,lineHeight:height,padding: height?'0':'30rpx 0'}"
					:class="{active: curBar.alias === item.alias}"
					v-for="(item, index) in navbarList"
					:key="index"
					@click="handleChooseNavbar(item,index)"
				>{{item.name}}</view>
			</view>
		</div>
	</view>
</template>

<script>
	export default {
		props: {
			navbarList: {
				type: Array,
				default() {
					return []
				}
			},
			curNavbar: {
				type: [Object,Boolean],
				default() {
					return false
				}
			},
			height: {
				type: [String,Boolean],
				default() {
					return false
				}
			}
		},
		data() {
			return {
				curBar: this.curNavbar
			}
		},
		watch: {
			curNavbar(v) {
				this.curBar = v
			}
		},
		methods: {
			handleChooseNavbar(item, i) {
				// this.curBar = item
				this.$emit('handleChooseNavbar', item, i)
			},
		}
	}
</script>

<style lang="scss" scoped>
.navbar {
	.tfc-list {
		display: flex;
		justify-content: space-evenly;
		background-color: #fff;
		.tfc-item {
			font-size: 32rpx;
			transition: all 0.1s ease-in;
			text-align: center;
			&.active {
				color: $blue;
				position: relative;
				font-weight: bold;
				&::before {
					content: '';
					height: 6rpx;
					width: 36rpx;
					border-radius: 3rpx;
					background-color: $blue;
					position: absolute;
					bottom: 0rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}
}
</style>
